<template>
  <div class="allBox">
    <div class="shopItemBox" v-for="(item,index) in orderListStore.shopItemList" :key="index">
      <div class="shopItemImg">
        <el-image style="width: 180px" :src="item.imgUrl" fit="fill" />
      </div>
      <div class="shopItemDescBox">{{ item.imgName }}</div>
      <div class="shopItemDescBox">{{ item.imgResInfo }}</div>
      <div class="shopItemDescBox">库存量：{{ item.sale_num }}</div>
      <div class="shopItemDescBox"><span style="color: red;">{{ item.imgPrice }}</span></div>
      <div class="deleteShopItemBox" @click="deleteShopItemEvement(item)">
         <Scissor class="deleteIconBox"/>
      </div>
      <el-dialog v-model="centerDialogVisible" title="警告" width="500" center :modal="dialogModal" append-to-body>
        <span style="user-select: none;">
          删除该商品后仍会保留已创建成功的订单,是否仍要删除？
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="forgivDeleteShopItem">取消</el-button>
            <el-button type="primary" @click="deleteShopItemEvementEnter">
              删除
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div class="shopItemBox">
      <div class="addItemBox" @click="createShopItemAdd">
        <Plus class="PlusIconBox"/>
      </div>
      <div class="shopItemDescBox">点击+添加商品</div>
    </div>

    <el-dialog v-model="createShopItemList" title="警告" width="500" center :modal="dialogModal" append-to-body draggable>
      <el-form :model="addShopItemListForm" label-width="auto" style="max-width: 600px" >
        <el-form-item label="商品名称">
          <el-input v-model="addShopItemListForm.imgName" type="textarea" clearable />
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input-number v-model="addShopItemListForm.sale_num" :min="1" :max="100" size="large" />
        </el-form-item>
        <el-form-item label="商品价格/¥">
          <el-input-number v-model="addShopItemListForm.imgPrice" :min="100" :max="100000" :step="100" size="large" />
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input v-model="addShopItemListForm.imgResInfo" type="textarea" clearable />
        </el-form-item>
        <el-form-item label="商品图片上传">
          <el-upload
            class="avatar-uploader"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="1"
          >
            <el-icon><Plus /></el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="forgivCreateeShopItem">取消</el-button>
            <el-button type="primary" @click="createShopItemAddList">
              创建商品
            </el-button>
          </div>
        </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { useOrderListStore } from '../../store/OrderList';
import { Scissor, Plus, Download, Delete, ZoomIn } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { ref } from "vue";
import { uploadProps } from 'element-plus';


let addShopItemListForm = ref({
  imgUrl:'',
  imgName:'',
  imgResInfo:'',
  imgPrice:0,
  sale_num:0,
  orderType:'',
  _id:''
});

const handleRemove = (file) => {
  // console.log(document.querySelector('.el-upload-list__item'),'123')
  //把设置的仅有一个的节点移除
  if(document.querySelector('.el-upload-list__item')){
    document.querySelector('.el-upload-list__item').remove()
  }
}
let createShopItemList = ref(false); //创建对话框
const orderListStore = useOrderListStore();
const centerDialogVisible = ref(false);
let shopItemInfo = ref(''); //临时信息存放
let dialogModal = ref(false);


function forgivDeleteShopItem(){
  //取消删除事件
  centerDialogVisible.value = !centerDialogVisible.value
}
function deleteShopItemEvementEnter(){
  //确认删除事件
  //去掉相关订单
  let forceId = ref(''); // 目标下标
  let newOrderList = ref(''); //新数组
  let orderListInfo = orderListStore.shopItemList // 数据数组
  orderListStore.shopItemList.forEach((r,index)=>{
    if(r._id == shopItemInfo.value._id){
      forceId.value = index
    }
  })
  if(forceId.value || forceId.value === 0){
    newOrderList.value = orderListInfo.splice(forceId.value,1)
  };
  //改变订单列表
  orderListStore.setNewOrderList(newOrderList)
  //关闭确认框
  centerDialogVisible.value = !centerDialogVisible.value
}
function deleteShopItemEvement(nbs){
  // console.log(value)
  shopItemInfo.value = nbs
  //打开确认框
  centerDialogVisible.value = !centerDialogVisible.value
}
function forgivCreateeShopItem(){
  //取消创建事件
  addShopItemListForm.value = {
    imgUrl:'',
    imgName:'',
    imgResInfo:'',
    imgPrice:0,
    sale_num:0,
    orderType:'',
    _id:''
  }
  //关闭对话框
  createShopItemList.value = !createShopItemList.value
}
function createShopItemAdd(){
  //点击创建新的商品
  createShopItemList.value = !createShopItemList.value
}
function createShopItemAddList(){
  //创建商品事件
  // console.log(addShopItemListForm.value,'value');
  //设置新的_id
  let newDateId = ref('');
  newDateId.value =  orderListStore.userInfo.userName +  Date.now().toString();
  addShopItemListForm.value._id = newDateId.value;
  let templateShopItemList = {
    imgUrl:addShopItemListForm.value.imgUrl,
    imgName:addShopItemListForm.value.imgName,
    imgResInfo:addShopItemListForm.value.imgResInfo,
    imgPrice: "¥" + addShopItemListForm.value.imgPrice,
    sale_num:addShopItemListForm.value.sale_num,
    orderType:addShopItemListForm.value.orderType,
    _id:addShopItemListForm.value._id
  }
  //新建数组
  let newListItemForShopItemList = JSON.parse(JSON.stringify(orderListStore.shopItemList));
  newListItemForShopItemList.push(templateShopItemList);
  //调用
  orderListStore.setNewShopItemList(newListItemForShopItemList);
  //清空内容
  addShopItemListForm.value = {
    imgUrl:'',
    imgName:'',
    imgResInfo:'',
    imgPrice:0,
    sale_num:0,
    orderType:'',
    _id:''
  };
  //调用移除事件
  handleRemove();
  //关闭对话框
  createShopItemList.value = !createShopItemList.value
  
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.allBox{
  box-sizing: border-box;
  padding: 20px 50px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  scrollbar-width: none;
}
.allBox::-webkit-scrollbar {
  display: none;
}
.shopItemBox{
  width: 250px;
  height: 350px;
  border: 1px dotted #bbb;
  padding: 10px;
  overflow: hidden;
  margin: 5px;
  position: relative;
  border-radius: 10px;
}
.shopItemImg{
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}
.shopItemDescBox{
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin: 5px 0 ;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deleteShopItemBox{
  position: absolute;
  top: -1px;
  right: -10px;
  width: 40px;
  height: 30px;
  border: 1px dotted #ccc;
  cursor: pointer;
}
.deleteIconBox{
  width: 30px;
  height: 30px;
  color: rgb(13, 131, 170);
}
.addItemBox{
  width: 200px;
  height: 200px;
  border: 1px dotted #6fd1c7;
  margin: 20px auto;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
  border-radius: 50%;
}
.PlusIconBox{
  width: 100px;
  height: 100px;
  color: #6fd1c7;
  transform: translateY(40%);
}
</style>